<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/masonry-docs.css" />

	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="js/masonry-docs.js"></script>

	<style>
		.container-fluid {
			padding: 20px;
			width: 100%;
		}
		
		.box {
			margin-bottom: 20px;
			float: left;
			width: 50%;
		}
		
		.box img {
			width: 100%
		}
	</style>

	<body>
		<div id="masonry" class="container-fluid">
			<div class="box"><img src="images/10.jpg"></div>
			<div class="box"><img src="images/12.png"></div>
			<div class="box"><img src="images/22.png"></div>
			<div class="box"><img src="images/18.jpg"></div>
			<div class="box"><img src="images/13.jpg"></div>
			<div class="box"><img src="images/14.jpg"></div>
			<div class="box"><img src="images/19.jpg"></div>
			<div class="box"><img src="images/20.jpg"></div>
			<div class="box"><img src="images/15.jpeg"></div>

		</div>
	</body>
	<script>
		$(function(){
			
			$('#masonry').masonry({ columnWidth: 50%});
			$('#masonry').masonry({ singleMode: true });
			
			var $container = $('#masonry');
			$container.imagesLoaded(function() {
				$container.masonry({
					itemSelector: '.box',
					gutter: 20,
					isAnimated: true,
				});
			});
		})
	</script>

</html>